<script setup lang="ts">

import { onMounted, reactive } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { getShopMessageType } from '@/utils/util'
const router = useRouter()
const route = useRoute()

onMounted(() => {
    // console.log(route.query)
    // vdata.goods = { ...route.query }
    /**
     * 在这里调获取消息的接口
     */
})
const messages = [
    {
        type: 2,
        time: '2024-05-26 12:00:00',
        messageName: '端午祝福',
        messageDetail: '<div>百万豪礼随心所得，具体请点击<a>链接XXXXXXXXXXXXXX</a></div>'
    },
    {
        type: 1, //{商品评价1、请求审核2、审核通知3}
        time: '2024-05-26 12:00:00',
        order: {
            shop: '自营小店',
            orderNumber: 'MYD0000000001',
            status: 1,
            product: {
                id: 12,
                goodsBanner: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                goods_name: '天堂伞',
                goods_brand: '晨风华容',
                category: '日用-雨具',
                text: ['罗氏香喷喷叫花鸡', '真空包装，质量保证。'],
                chandd: '江苏',
                primary_price: 17,
                price: 15.5,
                goods_stock: 10,
                sku: 1646464,
                goods_details: '商品详情',
                recommendation: '感谢您使用华容，我们为您遮风挡雨'
            }
        }
    },
    {
        type: 2,//1:平台消息；2：店铺消息
        time: '2024-4-30 12:00:00',
        messageName: '五一乐购',
        messageDetail: '<div>百万豪礼随心所得，具体请点击<a>链接XXXXXXXXXXXXXX</a></div>'
    },
    {
        type: 3,//1:平台消息；2：店铺消息
        time: '2024-04-26 12:00:00',
        messageName: '活动预告',
        messageDetail: '<div>百万豪礼随心所得，具体请点击<a>链接XXXXXXXXXXXXXX</a></div>'
    },
    {
        type: 1,//1:平台消息；2：店铺消息
        time: '2024-05-26 12:00:00',
        order: {
            shop: '自营小店',
            orderNumber: 'MYD0000000001',
            status: 0,
            product: {
                id: 12,
                goodsBanner: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                goods_name: '天堂伞',
                goods_brand: '晨风华容',
                category: '日用-雨具',
                text: ['罗氏香喷喷叫花鸡', '真空包装，质量保证。'],
                chandd: '江苏',
                primary_price: 17,
                price: 15.5,
                goods_stock: 10,
                sku: 1646464,
                goods_details: '商品详情',
                recommendation: '感谢您使用华容，我们为您遮风挡雨'
            }
        }
    },
]

</script>
<template>
    <div class="messge_main">
        <div class="goods-comment" v-for="(item, index) in messages" :key="index">
            <div class="message_body">
                <div class="message_user">
                    <div class="user_time">
                        <div class="user">[{{ getShopMessageType(item.type) }}]</div>
                        <div class="grey time">{{ item.time }}</div>
                    </div>
                </div>
                <div class="message_text">
                    <div class="sku_name" v-if="item.type == 1">{{ item.order.product.goods_name
                        }}
                    </div>

                    <div class="grey message_word" v-if="item.type == 1">
                        {{ '收到顾客***5星评价' }}
                    </div>
                    <div v-else-if="item.type == 2" class="grey message_word">{{ '你有新的审核请求待处理' }}</div>

                    <div v-else class="grey message_word">{{ '你的******申请已通过审核' }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.messge_main {
    .goods-comment {
        min-height: 80px;
        border: 1px solid #3a3d3d;
        border-radius: 10px;
        margin: 10px;
        display: block;
        overflow: auto;

        .message_body {
            margin: 10px;

            .message_user {
                display: flex;
                height: 50px;

                .user {
                    font-weight: bold;
                }

                .user_time {
                    height: 25px;
                    line-height: 25px;
                    padding-left: 10px;
                }

                .avatar {
                    width: 50px;
                    /* 头像框的宽度 */
                    height: 50px;
                    /* 头像框的高度 */
                    border: 3px solid #fff;
                    /* 头像框的边框 */
                    border-radius: 50%;
                    /* 头像框的圆角 */
                    overflow: hidden;
                    /* 确保图片不会溢出头像框 */
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                    /* 头像框的阴影效果 */
                    image-rendering: pixelated;

                    /* 当图片缩放时，确保像素化效果 */
                    img {
                        width: 100%;
                        /* 图片宽度匹配头像框宽度 */
                        height: 100%;
                        /* 图片高度匹配头像框高度 */
                    }
                }


            }

            .message_text {
                background-color: #cfdbe6;
                margin-top: 20px;
                padding-left: 30px;
                line-height: 25px;
                padding-top: 10px;
                padding-bottom: 10px;
                border-radius: 5px;

                .sku_name {
                    color: #000;
                    font-weight: bold;
                }

                .message_word {}
            }
        }


    }

    .grey {
        color: #8a8787;
    }
}
</style>